import type { PdfJs } from "../interface";
import WithScale from "./WithScale";
import { FC, useRef } from "react";

interface SvgLayerProps {
  height: number;
  page: PdfJs.Page;
  rotation: number;
  scale: number;
  width: number;
}

const SvgLayer: FC<SvgLayerProps> = ({
  height,
  page,
  rotation,
  scale,
  width,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  const empty = (): void => {
    const containerEle = containerRef.current;
    if (!containerEle) {
      return;
    }
    containerEle.innerHTML = "";
  };

  const renderSvg = (): void => {
    const containerEle = containerRef.current as HTMLDivElement;
    const viewport = page.getViewport({ rotation, scale });

    page.getOperatorList().then((operatorList) => {
      empty();
      const graphic = new PdfJs.SVGGraphics(page.commonObjs, page.objs);
      graphic.getSVG(operatorList, viewport).then((svg) => {
        // It seems that we don't have to set the size for `svg`
        svg.style.height = `${height}px`;
        svg.style.width = `${width}px`;

        containerEle.appendChild(svg);
      });
    });
  };

  return (
    <WithScale callback={renderSvg} rotation={rotation} scale={scale}>
      <div className="rpv-core__svg-layer" ref={containerRef} />
    </WithScale>
  );
};

export default SvgLayer;
